<template>
  <div>
    <!-- 筛选列表 -->
    <el-card style="margin-bottom: 20px" id="search">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="90px"
          class="serach_contant"
        >
          <el-form-item label="考位状态：">
            <el-select
              v-model="queryParams.kwStatus"
              placeholder="换考位"
              clearable
              size="small"
              style="width: 202px"
              @change="handleQuery"
            >
              <el-option
                v-for="(item, index) in testSiteList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日志状态：">
            <el-select
              v-model="queryParams.logDbType"
              placeholder="日志状态"
              clearable
              size="small"
              style="width: 202px"
              @change="handleQuery"
            >
              <el-option label="全部" :value="null" />
              <el-option
                v-for="(item, index) in DbTypeStatusList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考点：">
            <el-autocomplete
              v-model="queryParams.kaodian"
              size="small"
              style="width: 202px"
              :fetch-suggestions="querySearchAsync"
              placeholder="搜索考点"
              @select="handleSelect"
              @keyup.space.native="handleExamRoom(queryParams.kaodian)"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="准考证：">
            <el-input
              v-model="queryParams.zkzNum"
              placeholder="输入准考证"
              clearable
              size="small"
              style="width: 202px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <!-- <el-button type="warning" size="mini" >导入日志文件</el-button> -->
          </el-form-item>
          <el-form-item>
            <el-upload
              ref="dbUrl"
              name="multipartFile"
              :headers="headers"
              :action="uploaddbAction"
              accept=".db"
              :limit="1"
              :file-list="fileList"
              :on-success="onSuccess"
              :on-progress="handleUploadProgress"
            >
              <el-button icon="el-icon-refresh" size="mini" type="warning"
                >导入日志文件</el-button
              >
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 标签列表 -->
    <el-card>
      <!--  Table-->
      <el-table v-loading="loading" :data="noJournalList">
        <el-table-column type="index" width="50" align="center" label="编号" />
        <el-table-column label="省份" align="center" prop="provinceName" />
        <el-table-column
          label="考点"
          align="center"
          prop="kaodian"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="机房" align="center" prop="jifang" />
        <el-table-column label="姓名" align="center" prop="studentName" />
        <el-table-column label="准考证号" align="center" prop="zkzNum" />
        <el-table-column label="机号" align="center" prop="pcNo" />
        <el-table-column label="换考位状态" align="center" prop="kwStatus" />
        <el-table-column
          label="状态"
          align="center"
          :formatter="DbTypeStatusFormat"
        />
      </el-table>

      <!-- page -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { listLogsNotFind, searchExamRoom } from "@/api/toolsystem/answers";

export default {
  name: "noJournal",
  props: {
    DbTypeStatusList: Array, // 日志状态列表
    testSiteList: Array, // 考位状态列表
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 考点搜索
      restaurants: [],
      timeout: null,
      state: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        kaodian: null,
        zkzNum: null,
        kwStatus: 1,
        logDbType: null,
      },
      //显示批量管理
      allManage: false,
      btnText: "批量管理",
      // list列表
      noJournalList: [],
      //导入DB文件arry
      fileList: [],
      // db上传
      uploaddbAction:
        process.env.VUE_APP_BASE_API + "/tools-checkanswer/uploadDb",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 日志状态字典翻译
    DbTypeStatusFormat(row, column) {
      return this.selectDictLabel(this.DbTypeStatusList, row.logDbType);
    },
    // 考位状态
    testSiteFormat(row, column) {
      return this.selectDictLabel(this.testSiteList, row.kwStatus);
    },
    // 考点模糊搜索
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(restaurants);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    // 监听每次按下空格键模糊搜索考点
    handleExamRoom(key) {
      console.log(key, "key");
      searchExamRoom(key).then((res) => {
        if (res.code != 200) {
          return this.msgError(res.msg);
        }
        res.data.forEach((item) => {
          let obj = {
            value: item,
          };
          this.restaurants.push(obj);
        });
      });
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.queryParams, "11");
      this.getList();
    },
    // 筛选表单重置
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.getList();
    },
    // 上传db文件
    onSuccess(res, file) {
      console.log(res, "111");
      if (res.code != 200) {
        return this.msgInfo(res.msg);
      }
      this.fileList[0] = {
        name: file.name,
        url: res,
      };
      this.$refs["dbUrl"].clearFiles(); //上传成功之后清除历史记录
      return this.msgInfo(res.msg);
    },

    // 文件上传中处理
    handleUploadProgress(event, file, fileList) {},
    /** 列表 */
    getList() {
      this.loading = true;
      // 获取列表
      listLogsNotFind(this.queryParams)
        .then((res) => {
          // console.log(res, "joinlist");
          if (res.code != 200) {
            this.loading = false;
            // return this.msgError(res.msg);
          }
          this.noJournalList = res.rows;
          // console.log(this.teststieList)
          this.total = res.total;
          // console.log(this.total)
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          // console.log(error);
        });
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/styles/card.scss";
// bannerlist图标的大小
.aa {
  font-size: 20px;
}
.line {
  border-bottom: 1px solid #c0c4cc;
  padding: 20px 0;
}

h4 {
  // padding-bottom: 20px;
  margin: 0 !important;
}
span {
  font-size: 4px;
}
tr {
  min-width: 200px;
}
.flex {
  display: flex;
}
// search
#search .serach_contant {
  margin-top: 20px;
}
//批量管理
.allManage {
  justify-content: space-between;

  .btnManage {
    justify-content: flex-end;
  }
}
</style>
